<template>
    <div class="open-trades">
        <div class="title">Open Trades</div>
        <div class="trade-list">
            <div class="trade-item" v-for="item in open_list">
                <div class="left-box">
                    <div class="name-box">
                        <div class="symbol">{{ item.shortName }}</div>
                        <div class="name">{{ item.fullName }}</div>
                        <div class="type" :style="`color: ${ typeMap[item.openSide].color }`">{{ typeMap[item.openSide].text }}</div>
                    </div>
                    <div class="price-box">
                        <div class="shared-and-price">{{ item.quantity }} shares @ ${{ item.openPrice }}</div>
                    </div>
                </div>
                <div class="right-box">
                    <div class="stat">Fee: {{ item.fee }}</div>
                    <div class="stat">Total: {{ item.totalAmount }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { assetService } from '@/service/asset';

const typeMap = {
    0: {
        text: 'Buy',
        color: 'var(--positive-number-color)'
    },
    1: {
        text: 'Sell',
        color: 'var(--negative-number-color)'
    },
};

// 开仓记录列表
const open_list = ref([]);

onMounted(() => {
    // 获取开仓记录列表
    assetService.getStockOpenList(open_list);
});
</script>

<style scoped lang="less">
.open-trades {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;
    border-radius: 3vw;
    background-color: #fff;
    box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3vw;

    .title {
        font-size: 3.5vw;
        font-weight: 700;
        color: var(--text-color);
    }

    .trade-list {
        display: flex;
        flex-direction: column;

        .trade-item {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2vw;
            border-bottom: 0.1vw solid var(--border-color);

            &:last-child {
                border-bottom: none;
            }

            .left-box {
                display: flex;
                flex-direction: column;
                gap: 1vw;

                .name-box {
                    display: flex;
                    align-items: center;
                    gap: 1vw;

                    .symbol {
                        font-size: 2.7vw;
                        font-weight: 700;
                        color: var(--text-color);
                    }

                    .name {
                        font-size: 2.3vw;
                        font-weight: 400;
                        color: var(--text-light-color);
                    }
                    
                    .type {
                        font-size: 2.3vw;
                    }
                }

                .price-box {
                    display: flex;
                    align-items: center;
                    gap: 1vw;

                    .shared-and-price {
                        font-size: 2.3vw;
                        font-weight: 400;
                        color: var(--text-light-color);
                    }
                }
            }

            .right-box {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 1vw;

                .stat {
                    font-size: 2.3vw;
                    font-weight: 400;
                }
            }
        }
    }
}
</style>